<template>
  <div class="app-container">
    <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入关键字" clearable style="width: 240px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->
    <el-table v-loading="loading" :data="dataList" border>
      <el-table-column label="序号" type="index" align="center" />
      <el-table-column label="邮件类型" align="center" prop="type">
        <template slot-scope="scope">
          <span>{{ scope.row.type | emailPaymentMethod }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleView(scope.row)"
            v-hasPermi="['system:config:edit']">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.params.pageNum"
      :limit.sync="queryParams.params.pageSize" @pagination="getList" />
    <el-dialog title="修改邮件模板" :visible.sync="skuEditShow" width="700px" append-to-body :close-on-click-modal="false">
      <el-form ref="skuForm" :model="skuForm" :rules="skuRules" label-width="80px">
        <el-form-item label="内容" prop="content">
          <el-input v-model="skuForm.content" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSkuForm">确 定</el-button>
        <el-button @click="cancelSku">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listCloudConfig,
  listCloudType,
  addCloudConfig,
  updateCloudConfig,
  delCloudConfig,
  listCloudSku,
  addCloudSku,
  updateCloudSku,
  delCloudSku,
} from "@/api/configManagement/cloudMarketConfig";
import {
  emailTemplateList, putEmailTemplate
} from "@/api/configManagement/emailModel";
export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      loading: false, // 遮罩层
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      dataList: [], // 表格数据
      generalList: [], // 通用分类列表
      industryList: [], // 行业分类列表
      open: false, // 是否显示新建配置弹出层
      // 查询参数
      queryParams: {
        params: {
          pageNum: 1,
          pageSize: 10,
        },
        title: null,
      },
      form: {}, // 表单参数
      // // 表单校验
      // rules: {
      //   title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
      //   intro: [{ required: true, message: "商品介绍不能为空", trigger: "blur" }],
      //   description: [{ required: true, message: "产品说明不能为空", trigger: "blur" }],
      //   core: [{ required: true, message: "核心功能不能为空", trigger: "blur" }],
      //   advantage: [{ required: true, message: "优势分析不能为空", trigger: "blur" }],
      //   picture: [{ required: true, message: "图片不能为空", trigger: "blur" }],
      //   corporateName: [{ required: true, message: "公司名称不能为空", trigger: "blur" }],
      //   servicePhone: [
      //     { required: true, message: "服务电话不能为空", trigger: "blur" },
      //     {
      //       pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      //       message: "请输入正确的电话号码",
      //       trigger: "blur",
      //     },
      //   ],
      //   serviceEmail: [
      //     { required: true, message: "服务邮箱不能为空", trigger: "blur" },
      //     // 邮箱验证
      //     {
      //       pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      //       message: "请输入正确的邮箱",
      //       trigger: "blur",
      //     },
      //   ],
      //   cloudMarketIndustryClassification: [
      //     { required: true, message: "行业分类不能为空", trigger: "blur" },
      //   ],
      //   cloudMarketGeneralClassification: [
      //     { required: true, message: "通用分类不能为空", trigger: "blur" },
      //   ],
      // },
      skuLoading: false, // 遮罩层
      skuShow: false, // 规格弹窗
      skuList: [], // 规格列表
      skuTotal: 0, // 规格总条数
      skuParams: {
        params: {
          pageNum: 1,
          pageSize: 10,
        },
        marketId: null, // 选中云市场ID
      },
      skuEditShow: false, // 规格编辑弹窗
      skuForm: {}, // 表单
      skuMethodList: [
        // 购买方式列表
        { label: "按次", value: "0" },
        { label: "按天", value: "1" },
        { label: "按月", value: "30" },
        { label: "按年", value: "365" },
      ],
      skuRules: {
        // 表单验证
        content: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
      }, // 规则
    };
  },
  created() {
    this.getTypeList();
    this.getList();
  },
  watch: {
    // 富文本框处理
    "form.description"(val) {
      if (val == "<p><br></p>" || val == "<p></p>") {
        this.form.description = "";
      }
    },
    "form.core"(val) {
      if (val == "<p><br></p>" || val == "<p></p>") {
        this.form.core = "";
      }
    },
    "form.advantage"(val) {
      if (val == "<p><br></p>" || val == "<p></p>") {
        this.form.advantage = "";
      }
    },
    "form.intro"(val) {
      if (val == "<p><br></p>" || val == "<p></p>") {
        this.form.intro = "";
      }
    },
  },
  methods: {

    /** 查询参数列表 */
    getList() {
      this.loading = true;
      emailTemplateList()
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取分类列表
    getTypeList() {
      listCloudType().then((res) => {
        this.generalList = res.data.cloudMarketGeneralClassification;
        this.industryList = res.data.cloudMarketIndustryClassification;
      });
    },
    // 通用分类名称
    getGeneralType(id) {
      let row = this.generalList.find((item) => item.id === id);
      return row ? row.name : "";
    },
    // 行业分类名称
    getIndustryType(id) {
      let row = this.industryList.find((item) => item.id === id);
      return row ? row.name : "";
    },

    // 表单重置
    resetSku() {
      this.skuForm = {
        content: null
      };
      this.resetForm("skuForm");
    },
    // 修改
    handleView(row) {
      this.skuForm = row
      this.skuEditShow = true;
    },
    // 取消弹窗
    cancelSku() {
      this.skuEditShow = false;
      this.resetSku();
    },

    // 新增规格
    handleSkuAdd() {
      this.resetSku();
      this.skuForm.marketId = this.skuParams.marketId;
      this.skuEditShow = true;
    },
    // 修改规格
    handleSkuUpdate(row) {
      this.skuForm = Object.assign({}, row);
      this.skuEditShow = true;
    },
    // 提交规格表单
    submitSkuForm() {
      this.$refs["skuForm"].validate((valid) => {
        if (valid) {
          putEmailTemplate(this.skuForm).then((res) => {
            this.$modal.msgSuccess(res.msg);
            this.skuEditShow = false;
            this.getList()
          });
        }
      });
    },
    // 删除规格
    handleSkuDelete(row) {
      this.$modal
        .confirm("是否确认删除一级规格【" + row.firstSkuName + "】？")
        .then(() => {
          delCloudSku([row.marketSkuId]).then(() => {

            this.$modal.msgSuccess("删除成功");
          });
        })
        .catch(() => { });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.params.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },



  },
};
</script>
